// 事件监控

import { Button } from 'antd';
import React, { useRef, useEffect } from 'react';

function ClickHoc(Component: any) {
  return function Wrap(props: any) {
    const dom: any = useRef(null);

    useEffect(() => {
      const handleClick = () => console.log('发生点击事件');
      dom.current.addEventListener('click', handleClick);
      return () => dom.current.removeEventListener('click', handleClick);
    }, []);

    return (
      <div ref={dom}>
        <Component {...props} />
      </div>
    );
  };
}

// 装饰器语法
// experimental syntax 'decorators' isn't currently enabled

// nest.js
// ClickHoc(Index)
// @ts-ignore
@ClickHoc
class Index extends React.Component {
  render() {
    return (
      <div className="index">
        <p>hello，world</p>
        <Button>组件内部点击</Button>
      </div>
    );
  }
}

export default () => {
  return (
    <div className="box">
      <Index />
      <Button>组件外部点击</Button>
    </div>
  );
};
